<template>
  <div class="sliderBar">
    <!-- 该层作用主要是关闭侧边栏，类似一层遮罩效果 -->
    <div class="menu-mask" v-show="isSliderShow" @click="hideSlider">
    <transition>
      <!-- 这是是侧边栏的主要内容 -->
      <div class="slider-content" v-show="isSliderShow" >
        <div class="inner-content">
          <ul class="type-list">
            <li class="type">
              <router-link to="/gallery" tag="a" >
                图文
              </router-link>
            </li>
            <li class="type">
              <router-link to="/article" tag="a">
                阅读
              </router-link>
            </li>
            <li class="type">
              <router-link to="/music" tag="a">
                音乐
              </router-link>
            </li>
            <li class="type">
              <router-link to="/movie" tag="a">
                影视
              </router-link>
            </li>
            <li class="type">
              <router-link to="/about" tag="a">
                关于
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
  </div>
</template>

<script>
export default {
  name: 'sliderBar',
  data () {
    return {}
  },
  methods: {
    hideSlider () {
      this.$store.dispatch('hideSliderBar')
    }
  },
  computed: {
    isSliderShow () {
      return this.$store.getters.isShowMethod
    }
  },
  mounted () {}
}
</script>

<style lang="stylus" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active
  transition opacity .5s
.fade-enter, .fade-leave-to
  opacity 0
.slide-fade-enter-to, .slide-fade-leave-to
  transition transform 0.3s
  transform translate(0rem, 0rem)
.slide-fade-enter, .slide-fade-leave-to
  opacity 0
  transform translate(-5rem, 0rem)
  -webkit-transform translate(-286px,0px)
  transition opacity 0.3s ease-in-out, transform 0.3s ease-in-out
  -webkit-transition opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.3s ease-in-out
.menu-mask
  position fixed
  top 0
  left 0
  bottom 0
  right 0
  opacity 1
  z-index 10
  background rgba(0,0,0,0.5)
.slider-content
  z-index 11
  position fixed
  width  5rem
  height 100%
  background-color #ffffff
  top 0
  left 0
  bottom 0
  opacity 1
  box-shadow 5px 0 5px rgba(0,0,0,.15)
  ---webkit-overflow-scrolling touch
  .inner-content
    margin-top .7rem
    color #000000
    text-align center
    width 100%
    font-size .44rem
    .type-list
      padding .21rem 0
      .type
        a
          color rgba(0, 0, 0, 0.7)
          font-weight lighter
          display block
          padding .46rem .21rem
          height .4rem
          line-height .4rem
  .change
    display block
    width 5rem
    height 2.67rem
    opacity 0
    transform translate(3.79rem, 2.67rem)
    transition opacity .5s ease-in-out 0.5s
    .change:hover
      img
        transform translate(0rem, 0rem)
        opacity 1
</style>
